<template>
  <div class="repair-container">
    <!--搜索-->
    <section class="direct-content-wrapper">
      <!-- 搜索区 -->
      <Search
        :search-data="searchParams"
        :search-options="searchOptions"
        @clearAll="resetDate"
        @onSearch="onSearch"
      />
    </section>
    <!--  列表-->
    <div class="table_box">
      <div class="top_button">
        <el-button type="primary" @click="addDetail">新增</el-button>
      </div>
      <div>
        <Table
          ref="table"
          class="table_two"
          :table-data="tableData"
          @handleNumChange="handleNumChange"
          @handleSelectionChange="handleSelectionChange"
          @handleSizeChange="handleSizeChange"
        >
          <el-table-column
            slot="action"
            align="center"
            fixed="right"
            label="操作"
            width="240"
          >
            <template slot-scope="scope">
              <el-tooltip content="查看报修申请" placement="bottom">
                <el-button type="info" icon="el-icon-postcard" size="mini" @click="queryDetail(scope.row)" />
              </el-tooltip>
              <el-tooltip content="修改报修申请" placement="bottom">
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="updateDetail(scope.row)" />
              </el-tooltip>
              <el-tooltip content="受理报修申请" placement="bottom">
                <el-button size="mini" type="success" icon="el-icon-set-up" @click="acceptanceDetail(scope.row)" />
              </el-tooltip>
            </template>
          </el-table-column>
        </Table>
      </div>
    </div>
    <!--    新增修改详情弹窗-->
    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :title="titleInfo"
      width="35%"
    >
      <MyForm
        ref="myForm"
        :file-id="fileId"
        :form="formData.form"
        :inline="false"
        :label-width="formData.labelWidth"
        :options="formData.options"
        :rules="formData.rules"
        @changeSelect="changeSelect"
        @clearValidate="clearValidate"
        @validate="validate"
      />
    </el-dialog>
  </div>
</template>

<script>

import Search from '@/components/search/index.vue'
import Table from '../../components/table/index'
import MyForm from '@/components/form/form.vue'
import formData from '@/utils/formData.json'
import formDataQuery from '@/utils/formDataQuery.json'
import formDataUpdate from '@/utils/formDataUpdate.json'

export default {
  name: 'RepairApplication',
  components: { MyForm, Search, Table },
  data() {
    return {
      dialogVisible: false, // 弹窗
      titleInfo: '新增', // 弹窗名称
      fileId: [], // 文件id
      // 分页参数
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      // 搜索条件
      searchParams: {
        type1: '', // 服务类型
        type2: '', // 服务状态
        type3: '', // 评价状态
        type4: '', // 申请人
        time: [] // 日期范围
      },
      // 搜索表单配置项
      searchOptions: [
        {
          type: ['input'],
          label: '申请人：',
          prop: 'type4',
          width: '180px',
          placeholder: '请输入申请人'
        },
        {
          type: ['select'],
          label: '服务类型：',
          prop: 'type1',
          width: '180px',
          placeholder: '请选择问题类型',
          data: [
            {
              value: 1,
              label: '报修'
            }
          ]
        },
        {
          type: ['select'],
          label: '服务状态：',
          prop: 'type2',
          width: '180px',
          placeholder: '请选择问题状态',
          data: [
            {
              value: 1,
              label: '未受理'
            },
            {
              value: 2,
              label: '已受理'
            },
            {
              value: 3,
              label: '处理中'
            },
            {
              value: 4,
              label: '处理中'
            }
          ]
        },
        {
          type: ['select'],
          label: '评价状态：',
          prop: 'type3',
          width: '180px',
          placeholder: '请选择评价状态',
          data: [
            {
              value: 1,
              label: '未评价'
            },
            {
              value: 2,
              label: '已评价'
            }
          ]
        },
        {
          type: ['date'],
          label: '日期：',
          prop: 'time',
          width: '260px',
          placeholder: '请选择日期'
        }
      ],
      // 表格默认字段
      tableData: {
        columns: [
          // {
          //   selection: true
          // },
          {
            index: true,
            indexMethod(index) {
              return index + 1
            }
          },
          {
            prop: 'ledgerNameOne',
            label: '申请人'
          },
          {
            prop: '1',
            label: '联系方式'
          },
          {
            prop: '2',
            label: '楼座房号'
          },
          {
            prop: '3',
            label: '服务名称'
          },
          {
            prop: '4',
            label: '服务类型'
          },
          {
            prop: '5',
            label: '服务状态',
            formatter: {},
            data: [
              {
                id: 1,
                value: '未受理'
              },
              {
                id: 2,
                value: '已受理'
              }
            ]
          },
          {
            prop: '6',
            label: '评价状态'
          },
          {
            slot: 'action'
          }
        ],
        data: [
          {
            ledgerNameOne: '申请人',
            1: '联系方式',
            2: '坐落',
            3: '服务名称',
            4: '服务类型',
            5: 1,
            6: '评价状态'
          }
        ],
        total: 0
      },
      // form表单
      formData: {
      }
    }
  },
  mounted() {
    // 默认form数据
    this.resetForm()
    // 初始化表格数据
    this.initList()
  },
  methods: {
    // 初始化表格数据
    initList() {
    },
    // 新增记录
    addDetail() {
      this.titleInfo = '新增'
      this.formData = JSON.parse(JSON.stringify(formData.repairApplication))
      this.dialogVisible = true
    },
    // 查看此记录
    queryDetail(row) {
      this.titleInfo = '查看'
      this.formData = JSON.parse(JSON.stringify(formDataQuery.repairApplication))
      this.dialogVisible = true
    },
    // 修改此记录
    updateDetail(row) {
      this.titleInfo = '修改'
      this.formData = JSON.parse(JSON.stringify(formDataUpdate.repairApplication))
      this.dialogVisible = true
    },
    // 受理报修申请
    acceptanceDetail(row) {
      this.titleInfo = '受理'
      this.formData = JSON.parse(JSON.stringify(formDataQuery.repairApplication))
      this.dialogVisible = true
    },
    // 表单确定按钮
    validate() {
      const that = this
      switch (that.titleInfo) {
        case '新增':
          console.log(this.formData.form, '新增')
          break
        case '修改':
          console.log(this.formData.form, '修改')
          break
        case '受理':
          console.log(this.formData.form, '受理')
          this.$confirm('请确认是否受理该报修申请?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '受理成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消受理'
            })
          })
          break
        default:
          that.dialogVisible = false
          break
      }
    },
    // 表单取消按钮
    clearValidate() {
      this.dialogVisible = false
    },
    // 选择select
    changeSelect(val, item) {
      // console.log(val, item)
    },
    // 重置
    resetDate() {
      this.resetPage()
      this.initList()
    },
    // 搜索
    onSearch(searchFormData) {
      console.log(searchFormData, this.searchParams)
    },
    // 重置分页
    resetPage() {
      this.pagination = {
        pageSize: 10,
        pageNum: 1
      }
      this.$refs.table.pagination = {
        pageNum: 1,
        pageSize: 10
      }
    },
    // 重置form表单
    resetForm() {
      this.formData = JSON.parse(JSON.stringify(formData.repairApplication))
    },
    // 分页选择
    handleNumChange(pagination) {
      this.pagination = pagination
      this.initList()
      // console.log(pagination, '改变页数')
    },
    handleSizeChange(pagination) {
      this.pagination = pagination
      this.initList()
      // console.log(pagination, '改变条数')
    },
    // 选择表格数据
    handleSelectionChange(val) {
      // console.log(val, '选择的表格数据')
    }
  }
}
</script>

<style lang="scss" scoped>
.repair-container {
  background: #f0f2f5;
  padding: 20px;
}
.direct-content-wrapper {
  margin-bottom: 20px;
}
.table_box {
  background: #ffffff;
  padding: 10px;
  border-radius: 5px;
}
.top_button {
  height: 60px;
}
.table_two {
  width: 100%;
}
</style>
